<template>
  <img :src="src" alt="QR Code"/>
</template>

<script setup>
import {ref, watch} from 'vue';
import QRCode from 'qrcode';

/**
 * 二维码组件
 */
const props = defineProps({
    // 需要构造的二维码
    text: {type: String},
    // 生成二维码所需的配置参数
    options: {type: Object, default: () => {}}
});

// 默认配置
const default_options = {
    errorCorrectionLevel: 'L',
    margin: 1,
    height: 200,
    width: 200,
    type: '10',
    scal: 177,
    color: {
        dark: '#000'
    },
    rendererOpts: {
        quality: 0.9
    }
};

// 响应式引用，用于存储二维码的 Base64 URL
const src = ref('');

// 异步函数，用于生成二维码
const generateQRCode = async (text, options) => {
    const opts = {...default_options, ...options};
    src.value = await QRCode.toDataURL(text, opts);
};

// 监视props.text的变化，并在变化时重新生成二维码
watch(() => props.text, (newText) => {
    if (newText) {
        generateQRCode(newText, props.options);
    }
});

// 初始化组件
{
    if (props.text) {
        generateQRCode(props.text, props.options);
    }
}
</script>